<template>
  <div class="list-table">
    <el-form ref="queryForm" :model="queryParams" :inline="true">
      <el-form-item :label="$t('项目类型')" prop="dealType">
        <dict-select
          v-model="queryParams.dealType"
          dictionary="deal_type"
          :clearable="true"
        />
      </el-form-item>
      <el-form-item :label="$t('项目状态')" prop="dealStatus">
        <dict-select
          v-model="queryParams.dealStatus"
          dictionary="deal_status"
          :clearable="true"
        />
      </el-form-item>
      <el-form-item :label="$t('负责人')" prop="personCharge">
        <UserSelect
          v-model="queryParams.personCharge"
          :placeholder="$t('选择用户')"
        />
      </el-form-item>
      <el-form-item :label="$t('项目名称')" prop="dealName">
        <el-input
          v-model="queryParams.dealName"
          :placeholder="$t('项目名称')"
          clearable
          @keyup.enter.native="queryHandle"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="queryHandle">{{ $t("搜索") }}</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">{{ $t("重置") }}</el-button>
      </el-form-item>
    </el-form>
    <el-row>
      <el-col v-loading="chartLoading" :span="24" style="height:300px;">
        <Empty :data.sync="chartData.datas">
          <barLineChart v-if="chartData.datas.length > 0" ref="barChart" :chart-data="chartData" height="300px" @clickHandel="clickHandel" />
        </Empty>
      </el-col>
      <el-col v-loading="tableLoading" :span="24">
        <div class="area-header mt10">
          <span class="area-header-title">{{ $t('团队人员项目统计列表') }}</span>
        </div>
        <el-table v-loading="tableLoading" tooltip-effect="darkTable" :data="tableList" border>
          <el-table-column :label="$t('序号')" type="index" align="center" show-overflow-tooltip width="50">
            <template slot-scope="scope">
              {{ (queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1 }}
            </template>
          </el-table-column>
          <el-table-column :label="$t('项目名称')" align="center" prop="dealName" show-overflow-tooltip>
            <template slot-scope="scope">
              <router-link
                target="_blank"
                :to="{path:'/deal/home/dealBaseHome',query:{id:scope.row.dealId,companyId:scope.row.companyId}}"
                class="link_a"
              >{{ scope.row.dealName }}</router-link>
            </template>
          </el-table-column>
          <el-table-column :label="$t('项目类型')" align="center" prop="dealType" show-overflow-tooltip :formatter="dealTypeFormat" width="150" />
          <el-table-column :label="$t('项目状态')" align="center" prop="dealStatus" show-overflow-tooltip :formatter="dealStatusFormat" width="150" />
          <el-table-column :label="$t('项目负责人')" align="center" prop="personCharge" show-overflow-tooltip width="150" />
          <el-table-column :label="$t('总投资金额') + $t('金额单位')" align="center" prop="agreementMoney" show-overflow-tooltip width="150">
            <template slot-scope="scope">
              <span class="money-text">{{ moneyFormat(scope.row.agreementMoney, 'w') }}</span>
            </template>
          </el-table-column>
          <el-table-column :label="$t('已付款金额') + $t('金额单位')" align="center" prop="amountInvestmentFact" show-overflow-tooltip width="150">
            <template slot-scope="scope">
              <span class="money-text">{{ moneyFormat(scope.row.amountInvestmentFact, 'w') }}</span>
            </template>
          </el-table-column>

        </el-table>

        <pagination
          v-show="total>0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getTableList"
        />
      </el-col>
    </el-row>
  </div>
</template>

<script>
  // import MainBodySelect from '@/components/MainBodySelect/index'
  import { countDealByPersonCharge, findDealByTeam } from '@/api/base/deal/dealBase'
  import barLineChart from '@/views/chart/barLineChart.vue'
  export default {
    components: { barLineChart },
    data() {
      return {
        // 负责项目数量统计
        chartData: {
          datas: []
        },
        // 表格数据
        tableList: [],
        // 项目类型字典
        dealTypeOptions: [],
        // 项目状态字典
        dealStatusOptions: [],
        chartLoading: false,
        tableLoading: false,
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          dealId: undefined,
          dealStatus: undefined,
          dealType: undefined,
          personCharge: undefined,
          dealName: undefined,
          userId: undefined
        },
        total: 0
      }
    },
    created() {
      this.getDicts('deal_type').then(response => {
        this.dealTypeOptions = response.data
      })
      this.getDicts('deal_status').then(response => {
        this.dealStatusOptions = response.data
      })
      this.getChartList()
      this.getTableList()
    },
    methods: {
      getChartList() {
        this.chartLoading = true
        countDealByPersonCharge(this.queryParams).then(response => {
          this.chartData = {
            datas: [],
            seriesLabelShow: true,
            xLabel: []
          }
          if (response.data != null) {
            this.chartData.xLabel = response.data.map(v => v.nickName)
            this.chartData.datas = [
              {
                type: 'bar',
                data: response.data.map(v => { return { name: v.nickName, value: v.count, userId: v.userId } })
              }
            ]
          }
          this.chartLoading = false
        })
      },
      getTableList() {
        this.tableLoading = true
        findDealByTeam(this.queryParams).then(response => {
          this.tableList = response.rows
          this.total = response.total
          this.tableLoading = false
        })
      },
      // 柱状图查询
      clickHandel(val) {
        this.tableLoading = true
        if (val.userId) {
          this.queryParams.userId = val.userId
        }
        this.getTableList()
      },
      // 项目类型字典翻译
      dealTypeFormat(row) {
        return this.selectDictLabel(this.dealTypeOptions, row.dealType)
      },
      // 项目状态字典翻译
      dealStatusFormat(row) {
        return this.selectDictLabel(this.dealStatusOptions, row.dealStatus)
      },
      /** 搜索按钮操作 */
      queryHandle() {
        this.queryParams.userId = undefined
        this.queryParams.pageNum = 1
        this.getTableList()
        this.getChartList()
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.resetForm('queryForm')
        this.queryHandle()
      }
    }
  }
</script>

<style scoped>

</style>
